<template>
    <div class="compare-phone">
        <van-nav-bar left-arrow @click-left="$router.back(-1)" :fixed="true" :title="$t('m.PhoneSpecifications')"
                     style="color:#fff;">
        </van-nav-bar>
        <div style="margin-top:46px">
            <div v-if="showLatestPhone">
                <van-cell :title="$t('m.LatestDevices')" class="orange"/>
                <div class="photo-outer-wraper">
                    <!--latest phone 加loading 下面的in store 就不加了-->
                    <van-loading type="spinner" class="loading" v-if="latestLoading"/>
                    <div class="photo-inner-wraper" v-for="item in latestPhoneData" :key="item.propertyValueId"
                         @click="goToDetail(item.propertyValueId)">
                        <div class="image-area">
                            <img :src="item.photo||defaultPhonePhoto" @error="photoError(item)">
                        </div>
                        <span class="model-name">{{item.model}}</span>
                    </div>
                </div>
            </div>
            <div v-if="showStorePhone">
                <van-cell :title="$t('m.InStoresNow')" value="" label="" class="orange"/>
                <div class="photo-outer-wraper" style="minHeight:0">
                    <div class="photo-inner-wraper" v-for="item in inStorePhoneData" :key="item.propertyValueId"
                         @click="goToDetail(item.propertyValueId)">
                        <div class="image-area">
                            <img :src="item.photo||defaultPhonePhoto" alt="" style="width:100%;"
                                 @error="photoError(item)">
                        </div>
                        <span class="model-name">{{item.model}}</span>
                    </div>
                </div>
            </div>
        </div>
        <van-cell-group>
            <van-cell :title="$t('m.PopularBrands')" value="" label=""
                      @click="$router.push('/compare-phone/all-brands')" :value="$t('m.Viewall')" class="orange"/>
            <van-collapse v-model="activeNameOne" accordion>
                <van-collapse-item :title="item.text" :name="item.id" v-for="item in popularPhoneBrand" :key="item.id">
                    <div class="loading-area" v-if="loading">
                        <van-loading type="spinner"/>
                    </div>
                    <div v-if="modelData.length>0" v-for="itm in modelData" class="brand-type"
                         @click="goToDetail(itm.id)">
                        {{itm.text}}
                    </div>
                </van-collapse-item>
            </van-collapse>

        </van-cell-group>
        <div class="view-all-btn">
            <van-button size="large" class="btn" @click="$router.push('/compare-phone/all-brands')">
                {{$t('m.ViewAllBrand')}}
            </van-button>
        </div>
    </div>
</template>
<script>
    import popularPhoneBrand from "../../static/json/popularPhoneBrand"
    import {searchPhone} from "../../static/api/guc_api";
    import {getModelJson} from '../../static/api/zxy_api';

    export default {
        data() {
            return {
                defaultPhonePhoto: '../../static/img/images/phoneDefault.png',
                activeNameOne: '1',
                latestPhoneData: [],
                inStorePhoneData: [],
                popularPhoneBrand,
                pageNumData: {
                    pageNum: 1,
                    pageSize: 6
                },
                sort: '',
                showLatestPhone: true,
                showStorePhone: false,
                latestLoading: true,
                modelData: [],
                loading: false,
            }
        },
        methods: {
            photoError(item) {
                item.photo = this.defaultPhonePhoto
            },
            goToDetail(id) {
                this.$router.push({
                    path: '/compare-phone/phone-detail',
                    query: {
                        propertyValueId: id
                    }
                })
            },
            getLatestPhone() {
                let params = {}
                params.sort = this.sort
                params.pageNum = this.pageNumData.pageNum
                params.pageSize = this.pageNumData.pageSize
                searchPhone(params)
                    .then(res => {
                        this.latestLoading = false
                        window.scrollTo(0, 0)
                        if (res.data.errorID == 0) {
                            this.latestPhoneData = res.data.object.list
                        }
                        else {
                            this.showLatestPhone = false
                            this.$toast(res.data.message)
                        }
                    })
                    .catch(err => {
                        this.latestLoading = false
                        this.showLatestPhone = false
                        console.dir(err)
                    })
            },
            getInStorePhone() {
                let params = {}
                params.sort = this.sort
                params.pageNum = this.pageNumData.pageNum
                params.pageSize = this.pageNumData.pageSize
                params.inStoresNow = true
                searchPhone(params)
                    .then(res => {
                        if (res.data.errorID == 0) {
                            this.inStorePhoneData = res.data.object.list
                            this.showStorePhone = true
                        }
                        else {
                            this.showStorePhone = false
                            this.$toast(res.data.message)
                        }
                    })
                    .catch(err => {
                        this.showStorePhone = false
                        console.dir(err)
                    })
            }
        },
        watch: {
            activeNameOne: function (val) {
                this.modelData = []
                this.loading = true
                if (val) {
                    getModelJson(val)
                        .then(res => {
                            if (res.data.errorID == 0) {
                                this.loading = false
                                this.modelData = res.data.object
                            }

                        })
                        .catch(err => {
                            this.loading = false
                            console.log(err)
                        })
                }
            }
        },
        mounted() {
            this.getLatestPhone()
            this.getInStorePhone()
        }
    }
</script>
<style>
    .compare-phone .van-nav-bar {
        background-color: #f90;
    }

    .compare-phone .van-nav-bar .van-icon {
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }

    .orange {
        color: #f90 !important;
    }

    .compare-phone .van-cell__value {
        color: black;
    }

    .photo-outer-wraper {
        display: flex;
        position: relative;
        overflow-x: auto;
        flex-wrap: wrap;
        min-height: 300px;

    }

    .photo-outer-wraper .loading {
        position: absolute;
        z-index: 1001;
        left: 50%;
        top: 50%;
        transform: translate(-50%)
    }

    .photo-outer-wraper .photo-inner-wraper {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding: 0 2%;
        width: 29%;
        min-height: 150px;
        overflow: hidden;
    }

    .photo-outer-wraper .photo-inner-wraper .image-area {
        height: 0;
        width: 100%;
        padding-bottom: 100%;
        position: relative;
        background: white;
        overflow: hidden;
    }

    .photo-outer-wraper .photo-inner-wraper .image-area img {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
    }

    .photo-outer-wraper .photo-inner-wraper .model-name {
        text-align: center;
        margin-top: 10px;
    }

    .photo-outer-wraper .photo-inner-wraper span {
        font-weight: 600;
    }

    .view-all-btn {
        padding: 14px 4%;
    }

    .view-all-btn .btn {
        border: 1px solid #FF9A03;
        color: #FF9A03;
    }

    .brand-type {
        padding: 5px;
        line-height: 30px;
        height: 30px;
        border-bottom: solid 1px rgba(33, 33, 33, .1);
    }

    .brand-type:nth-last-child(1) {
        border-bottom: none;
    }

    .loading-area {
        display: flex;
        justify-content: center;
    }
</style>
